<template>
    <div class="container_box">
        <div class="content_box flexC">
            <ul class="flex colorF textC font_s20 main_title">
                <li class="flex1">序号</li>
                <li class="flex2">预警来源</li>
                <li class="flex2">主体名称</li>
                <li class="flex2">事件说明</li>
                <li class="flex2">事件时间</li>
                <li class="flex2">协同部门</li>
                <li class="flex2">处置时间</li>
                <li class="flex2">处置结果</li>
                <li style="width:37%">处置结果</li>
            </ul>
            <ul class="scrollBar" style="height:63.5vh;">
                <li class="flex textC colorF font_s18 main_content AlignItemsC" v-for="item in dataList" v-bind:key="item.id">
                    <span class="flex1">{{item.xh}}</span>
                    <span class="flex2">{{item.yjly}}</span>
                    <span class="flex2">{{item.ztmc}}</span>
                    <span class="flex2" style="padding: 0.285rem 0;">{{item.sjsm}}</span>
                    <span class="flex2">{{item.sjsj}}</span>
                    <span class="flex2">{{item.xtbm}}</span>
                    <span class="flex2">{{item.czsj}}</span>
                    <span class="flex2">{{item.czjg}}</span>
                    <div class="flex colorF" style="width:37%;padding:0.385rem 0;">
                        <p style="font-weight:bold;padding-top:0.485rem;">&nbsp;·&nbsp;&nbsp;·&nbsp;</p>
                        <p class="flexC textC">
                            <span class="rbtm rbtm_title01">预警</span>
                            <span>2018.11.4</span>
                        </p>
                        <p style="font-weight:bold;padding-top:0.485rem;">&nbsp;·&nbsp;&nbsp;·&nbsp;</p>
                        <p class="flexC textC">
                            <span class="rbtm rbtm_title02">推送</span>
                            <span>2018.11.4</span>
                        </p>
                        <p style="font-weight:bold;padding-top:0.485rem;">&nbsp;·&nbsp;&nbsp;·&nbsp;</p>
                        <p class="flexC textC">
                            <span class="rbtm rbtm_title03">反馈</span>
                            <span>2018.12.6</span>
                        </p>
                        <p style="font-weight:bold;padding-top:0.485rem;">&nbsp;·&nbsp;&nbsp;·&nbsp;</p>
                        <p class="flexC textC">
                            <span class="rbtm rbtm_title04">结束</span>
                            <span>2018.12.6</span>
                        </p>
                        <p style="font-weight:bold;padding-top:0.485rem;">&nbsp;·&nbsp;&nbsp;·&nbsp;</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      dataList: [
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '2018-04', czjg: '解散组织' },
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '2018-04', czjg: '解散组织' },
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '2018-04', czjg: '解散组织' },
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '2018-04', czjg: '解散组织' },
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '2018-04', czjg: '解散组织' },
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '2018-04', czjg: '解散组织' },
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '2018-04', czjg: '解散组织' },
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '2018-04', czjg: '解散组织' },
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '2018-04', czjg: '解散组织' },
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '2018-04', czjg: '解散组织' },
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '2018-04', czjg: '解散组织' },
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '2018-04', czjg: '解散组织' },
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '2018-04', czjg: '解散组织' },
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '2018-04', czjg: '解散组织' },
        { xh: 1, yjly: '非法社会组织排查', ztmc: '家百浓儿童中心', sjsm: '家百浓儿童中心非法收住孤残儿童', sjsj: '2018-1-30', xtbm: '祝桥镇', czsj: '', czjg: '解散组织' }
      ]
    }
  }
}
</script>
<style lang="scss" scoped>
.container_box {
    width: 95%;
    height: 88%;
    margin: 0 auto;
    .content_box {
        padding: 0 3.285rem;
        .main_title {
            background: #2954DA;
            line-height: 2.425rem;
            border-radius: 8px 8px 0 0;
        }
        .main_content {
            background: #1E40AA;
            border-radius: 8px;
            margin-top: 0.825rem;
            .rbtm {
                border-radius:12px;
                margin-bottom: 0.425rem;
                line-height: 2.285rem;
            }
            .rbtm_title01 {
                background:rgba(255,95,133,0.4);
                border:2px solid rgba(255,194,226,1);
            }
            .rbtm_title02 {
                background:rgba(54,208,203,0.4);
                border:2px solid rgba(127,241,255,1);
            }
            .rbtm_title03 {
                background:rgba(34,231,118,0.4);
                border:2px solid rgba(110,240,177,1);
            }
            .rbtm_title04 {
                background:rgba(85,85,227,0.4);
                border:2px solid rgba(145,160,250,1);
            }
        }
    }
    .scrollBar {
        overflow: auto;
    }
    .scrollBar::-webkit-scrollBar {
        width: 8px;
        border-radius: 10px;
        background-color: rgba($color: #ffffff, $alpha: 0.6)
    }
    .scrollBar::-webkit-scrollBar-thumb {
        border-radius: 10px;
        background-color: rgba($color: #3659f3, $alpha: 0.8)
    }
}
</style>
